<template>
	<view class="marquee_box" @touchstart='touchstartFn' @touchend='touchendFn'>
		<block v-show="isShow">
			<view class="" v-if="direction=='right'||direction=='left'">
				<view v-if="broadcastType=='text'" class="marquee_container" :style="'background:'+broadcastStylees.back_color+';'">
					<view v-if="broadcastIconIsDisplay" class="broadIcon" :style="'background:'+broadcastStylees.back_color+';font-size:28rpx;'">
						<text class="iconfont icon-guangbozheng-"></text>
						<text style="margin-left:12rpx;">{{broadcast_tit}}:</text>
					</view>
					<view class="boradcast_text_left_rig" :class='[direction=="left"?"marquee_text_left":direction=="right"?"marquee_text_right":"",animation_paused?"animation_pausedcss":""]'
					 :style="'--marqueeWidth--:'+(-broadcastStylees.width_mal)+'px;--speed--:'+broadcastStylees.time+'s;width:'+broadcastStylees.width_mal+'px;'">
						<view v-for="(item,index) in broadcastDataes" @click.stop="click_event(index)" :key="index" :style="'color:'+broadcastStylees.text_color+';margin-left:'+(index!=0?item.starspos:0)+'px;font-size:'+broadcastStylees.font_size+'rpx;'">
							{{item.text}}
						</view>
					</view>
				</view>
				
				<view v-if="broadcastType=='mould'" class="mould">
					<view class="" style="width: 100%;position: relative;overflow: hidden;" :style="'height:'+viewHeight+'rpx;'">
						<view class="broadcastTopBtm dsf" :class="[direction=='left'?'broadcastDataTopBtmDatacss_let':direction=='right'?'broadcastDataTopBtmDatacss_rig':'',animation_paused?'animation_pausedcss':'']"
						 :style="'--scrollWidth--:'+(-(scrlloWidth/2))+'px;--scrollSpeed2--:'+(scrlloWidth/broadcastStyle.speed)+'s;width:'+(scrlloWidth*2)+'px;'">
							<view ref="mouldRef" class="bml01" style="display: flex;justify-content: space-between;">
								<slot />
								<!-- <slot /> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="direction=='top'||direction=='bottom'" class="broadcastTopBtm" :style="'font-size:'+broadcastStyle.font_size+'rpx;color:'+broadcastStyle.text_color+';background:'+broadcastStyle.back_color+';height:'+viewHeight+'rpx;--scrollHeight--:'+(-broadcastTopBtmHeight/2)+'px;--scrollSpeed--:'+((broadcastTopBtmHeight/2)/broadcastStyle.speed)+'s;'">
				<view v-if="broadcastType=='text'" :class="[direction=='top'?'broadcastDataTopBtmDatacss_top':direction=='bottom'?'broadcastDataTopBtmDatacss_bottom':'',animation_paused?'animation_pausedcss':'']">
					<view v-for="(item,index) in broadcastDataTopBtmDataes" :key="index" @click.stop="click_event()" class="bdbd_item">
						{{item}}
					</view>
				</view>
				<view v-if="broadcastType=='mould'" :class="[direction=='top'?'broadcastDataTopBtmDatacss_top':direction=='bottom'?'broadcastDataTopBtmDatacss_bottom':'',animation_paused?'animation_pausedcss':'']">
					<slot />
					<!-- <slot /> -->
				</view>
			</view>

		</block>


	</view>
</template>

<script>
	/**
	 * author:G.bro
	 * date:20200513
	 * * **/
	export default {
		data() {
			return {
				broadcastDataes: [],
				broadcastDataTopBtmDataes: [],
				broadcastStylees: {},
				broadcastTopBtmHeight: 0,
				scrlloWidth: 0,
				animation_paused: false,
				qualifications: true,
				isShow: false
			}
		},
		props: {
			broadcastType: {
				type: String,
				default: 'text' //mould
			},
			imgdata: {
				type: Array
			},
			broadcastData: {
				type: Array
			},
			broadcastStyle: {
				type: Object,
				default () {
					return {
						speed: 90, //滚动速度，每秒3个字
						font_size: "28", //字体大小(rpx)
						text_color: "#fff", //字体颜色
						back_color: "#815CD4", //背景色

					}
				}
			},
			broadcastIconIsDisplay: { //图标是否显示
				type: Boolean,
				default: false
			},
			// broadcast_icon: {
			// 	type: String,
			// 	default: ''
			// },
			broadcast_tit: {
				type: String,
				default: '今日热点'
			},
			direction: {
				type: String,
				default: 'left'
			},
			viewHeight: {
				type: Number,
				default: 200
			},
			touchEvent: {
				type: true,
				default: false
			}

		},
		watch: {
			broadcastData(v) {
				console.log(v, '---')

				if (v.length) {
					this.isShow = true;
					this.initialization();
				}



			},
			imgdata(v) {
				console.log(v, '---')
				this.isShow = true;
				this.initialization();


			}
		},
		created() {


		},
		mounted() {

			// if(this.broadcastType=='text'){有偏差
			// 	let assist = { ...this.broadcastStyle};
			// 	const querys = uni.createSelectorQuery().in(this)
			// 	querys.select('.boradcast_text_left_rig').boundingClientRect(rect => {
			// 		assist.width_mal = rect.width;
			// 			assist.time = rect.width/assist.speed;
			// 			that.broadcastStylees=assist;
			// 	}).exec()
			// }
		},
		methods: {
			initialization() {
				let that = this;

				if (that.broadcastType == "text") {
					if (that.direction == "right" || that.direction == "left") {
						that.initial_let_rig();
					} else {
						
						let arr = [...that.broadcastData];
						arr = arr.concat(arr);
						that.broadcastDataTopBtmDataes = arr;
					}
				}

				if (that.direction == "top" || that.direction == "bottom") {
					that.$nextTick(() => {
						let dir = `.broadcastDataTopBtmDatacss_${that.direction}`
						const query2 = uni.createSelectorQuery().in(that);
						query2.select(dir).boundingClientRect(rect => {
							that.broadcastTopBtmHeight = rect.height;
							console.log(rect, '==rect.height')

							if (that.viewHeight - rect.height > 10) {
								that.qualifications = false;
								that.animation_paused = true;
								that.broadcastDataTopBtmDataes.splice(that.broadcastDataTopBtmDataes.length / 2, that.broadcastDataTopBtmDataes
									.length - 1);
									
							}

						}).exec();
					})
					
				}
				if (that.direction == "left" || that.direction == "right") {
					this.$nextTick(() => {
						try {
							if (that.broadcastType == 'mould') {
								const query = uni.createSelectorQuery().in(that)
								query.select('.bml01').boundingClientRect(rect => {
									that.scrlloWidth = rect.width;
									console.log(rect, '===================rect.width')
								}).exec()
							}
						} catch (e) {
							that.scrlloWidth = that.$refs.mouldRef.$el.clientWidth * 2
						}
					})
				}



			},
			touchendFn(e) {
				if (this.touchEvent && this.qualifications) {
					this.animation_paused = false;
				}
			},
			touchstartFn(e) {
				if (this.touchEvent && this.qualifications) {
					this.animation_paused = true;
				}
			},
			initial_let_rig() {
				let broadcastData = [...this.broadcastData];
				console.log(this.direction, 'this.direction')
				if (this.direction == "right") {
					broadcastData.reverse();
				}

				let ititdata = broadcastData.map((item) => {
						return {
							"text": item,
							"starspos": uni.getSystemInfoSync().windowWidth - 103
						}
					}),
					assist = { ...this.broadcastStyle
					},
					this_width = 0,
					spacing = 0,
					speed = (assist.speed * assist.font_size); //m每秒行走的距离

				for (let i in ititdata) {
					this_width += ititdata[i].text.length * assist.font_size;
					if (i != ititdata.length - 1) {
						spacing += ititdata[i].starspos
					}
				}
				let total_length = (this_width / 2) + spacing; //总长
				assist.time = total_length / speed; /**滚动时间*/
				assist.width_mal = total_length;
				this.broadcastDataes = ititdata;
				this.broadcastStylees = assist;
			},
			click_event(index) {
				let that = this;
				let i;
				if (index > ((that.broadcastDataTopBtmDataes.length / 2) - 1)) {
					i = index - (that.broadcastDataTopBtmDataes.length / 2);
				} else {
					i = index
				}
				
				this.$emit("changeEvent", {
					i,
					msg: `你点击了${i+1}条`
				});
			}

		}
	}
</script>

<style>
	/* app端有可能要加上 */
	/* page {
		overflow: hidden;
		width: 100%;
	} */

	.marquee_box {
		width: 100%;
		overflow: hidden;
		position: inherit;
		height: auto;
	}

	.mould {
		width: 750rpx;
		overflow: hidden;
		position: inherit;
	}

	.dsf {
		display: flex;
		justify-content: space-between;
	}

	.broadIcon {
		/* width: 60rpx; */
		padding: 0 22rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
		z-index: 999;
		line-height: 60rpx;

	}





	.marquee_container {
		position: relative;
		width: 100%;
		height: 60rpx;

	}

	.marquee_text_left {
		display: flex;
		white-space: nowrap;
		animation-name: around_left;
		animation-duration: var(--speed--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		line-height: 60rpx;
		position: absolute;

	}

	@keyframes around_left {
		from {
			left: 100%;
		}

		to {
			left: var(--marqueeWidth--);
		}
	}

	.marquee_text_right {
		display: flex;
		white-space: nowrap;
		animation-name: around_right;
		animation-duration: var(--speed--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		line-height: 60rpx;
		position: absolute;

	}

	@keyframes around_right {
		from {
			right: 100%;
		}

		to {
			right: var(--marqueeWidth--);
		}
	}

	.marquee_tit {
		height: 60rpx;
		line-height: 60rpx;

	}

	.broadcastTopBtm {
		padding: 12rx;
		overflow: hidden;
		position: relative;
	}

	.broadcastDataTopBtmDatacss_top {
		width: 100%;
		animation-name: around_top;
		animation-duration: var(--scrollSpeed--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		position: absolute;
		left: 0;
	}

	@keyframes around_top {
		from {
			top: 0%;
		}

		to {
			top: var(--scrollHeight--);
		}
	}

	.broadcastDataTopBtmDatacss_bottom {
		width: 100%;
		animation-name: around_Bottom;
		animation-duration: var(--scrollSpeed--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		position: absolute;
		left: 0;
	}

	@keyframes around_Bottom {
		from {
			bottom: 0%;
		}

		to {
			bottom: var(--scrollHeight--);
		}
	}

	.broadcastDataTopBtmDatacss_let {
		width: 100%;
		animation-name: around_let;
		animation-duration: var(--scrollSpeed2--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		position: absolute;
		left: 0;
		top: 0;
	}

	.broadcastDataTopBtmDatacss_rig {

		width: 100%;
		animation-name: around_rig;
		animation-duration: var(--scrollSpeed2--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		position: absolute;
		right: 0%;
		top: 0;
		display: flex;
		justify-content: flex-end;
	}

	.animation_pausedcss {
		animation-play-state: paused;
	}

	@keyframes around_let {
		from {
			left: 0%;
		}

		to {
			left: var(--scrollWidth--);
		}
	}

	@keyframes around_rig {
		from {
			right: 0%;
		}

		to {
			right: var(--scrollWidth--);
		}
	}

	.bdbd_item {
		padding: 0 12rpx;
		line-height: 60rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	@font-face {
		font-family: "iconfont";
		src: url('//at.alicdn.com/t/font_1686137_9el2ov99ag.eot?t=1589197045289');
		/* IE9 */
		src: url('//at.alicdn.com/t/font_1686137_9el2ov99ag.eot?t=1589197045289#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANIAAsAAAAAByAAAAL7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCJIIbATYCJAMICwYABCAFhG0HNxtIBhHVmxnIfiTYMS7bb8koPCedCeJJj2/e7iZfYqkjkZzk9lw0oCspm5uha1SEYUrOg//lO9IN4UL4FQBGHE6b4vPv8pzmojHnedQFGG8NaG9cCySQAgnMG8ZuIniA2yGAP8kUIg0ateiALwbQTwAZMXRwX3wLLgzGifoi2A1TDbIKC1+1WF0CVvLvy0fKxRcUlgYkthnUcAB13sA47XgOPSgBwXIGwJkFGigEDEiHRlMrtAwVovGPQoZ0OFa2wJs6nkf5h/3jgYDYgMxAABJ1/jMJsPBRMxUARq/vB7iTzgYmPjQ5vv+S6E4b/P2XXBBxLwYELI3pvDFm/XqMs27QknXgrK82yepoddiXOXTJhi3NTe/e7XznTqcNG7ZujLoN2Drexulwy99hXacl0UZCzNW77p1WfV52MOpyx+O3nVuFt1qs+xziN+DL8Q0BU2N17J84FTs1YMOXE/2dXf8DTwV62/5bne0/dmdranzv25uGonfvtepore/p0pXugqw9N2SpuKsuTSuYO7vtjzV1oka1azMqsm50/SYtYxvHNug6blqbRuGpQccDpjYpGzCwauyCmnETJpadjJjwO6teaETz1uHNQjPqfmhPHQC8q/q2Lvj3vyF17cvZvUOqvvkGGAAePO36jTu8q4ZhFvC9Q7PAnxYMzDOxCKjUI/MNs6JfzoECneta8QC2cJ5MVUe9VkzwJerlLD4kZdD4kkk01EJYBFAJG19q4U8BjWcHEME4NGL8gHzmaxBCOQlFMBehCeUy0VAfwyKaz7AJFQ1/OknEkgFki5dUfUYt6MD8IFnaPdKKEtk3DFfVnBdx2gv5TF4Yu6EcXXFHXmLE+Q6TiAfPtMGi7Ya1EhxMGa10UeSY+943XamztDWK+oxa0IH5QbK0e1pcVOXzNwxX1dyRM+J8IZ+pcRi7YQBxle+Dch5ln/MdJhEPnmmDRTNghSGCo7lTRitdnBA45t4o5IfKu+2V298tAfwBGiWwuSZo8KX3YOgfkRnbpgEA') format('woff2'),
			url('//at.alicdn.com/t/font_1686137_9el2ov99ag.woff?t=1589197045289') format('woff'),
			url('//at.alicdn.com/t/font_1686137_9el2ov99ag.ttf?t=1589197045289') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			url('//at.alicdn.com/t/font_1686137_9el2ov99ag.svg?t=1589197045289#iconfont') format('svg');
		/* iOS 4.1- */
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-guangbozheng-:before {
		content: "\e640";
	}
</style>
